﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JSLint Message classification</title>
    <link href="lib/syntax/styles/shCore.css" rel="stylesheet" type="text/css" />
    <link href="lib/syntax/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

    <script src="lib/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="lib/syntax/scripts/shCore.js" type="text/javascript"></script>

    <script src="lib/syntax/scripts/shBrushJScript.js" type="text/javascript"></script>

    <style type="text/css">
        ul
        {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        ul li
        {
            margin-bottom: 10px;
        }
        .l1
        {
            color: #FF0000;
            padding: 5px;
            font-weight: bold;
        }
        .l3
        {
            color: #FF9900;
            padding: 5px;
            font-weight: bold;
        }
        /*
        .syntaxhighlighter
        {
            margin: 1px 0 5px !important;
            width: auto !important;
        }
        .syntaxhighlighter .bar
        {
            display: block !important;
        }
        .syntaxhighlighter .toolbar .item.copyToClipboard
        {
            display: none !important;
        }
        .syntaxhighlighter .toolbar .item.printSource
        {
            display: none !important;
        }
        .syntaxhighlighter .toolbar .item.about
        {
            display: none !important;
        }
		*/</style>

    <script type="text/javascript">
        $(function() {

            SyntaxHighlighter.config.clipboardSwf = 'lib/syntax/scripts/clipboard.swf';
            $("pre").addClass("brush: js");
            SyntaxHighlighter.highlight();


            $("li div.l1, li div.l3").each(function(index) {
                $(this).html(index + 1 + ". " + $(this).html());
            });


        });
    </script>

</head>
<body>
    <h1>
        JSLint-Toolkit Warning Classification</h1>
    With <a href="http://code.google.com/p/jslint-toolkit/">JSLint-Toolkit</a>, we can check warnings in our JavaScript files.
    <br />
    But always there are too many warnings that we couldn't find the real issues.
    <br />
    It's necessary to classify the warnings into two levels.
    <br />
    <br />
    <div class="l1">
        L1: Critical warnings, which should be fixed ASAP.
    </div>
    <div class="l3">
        L2: Optional warnings, which should be fixed when you have enough time.
    </div>
    <br />
    <br />
    Following are the incomplete warning messages.I will update this list manually.
    <br />
    <br />
    <br />
    <ul>
        <li>
            <div class="l1">
                Missing semicolon.</div>
            <pre>
    // BAD
    var appDiscuss = {
        cred: "",
        baseURL: "/mashup/webclient/community/discussion/"
    }
    // GOOD
    var appDiscuss = {
        cred: "",
        baseURL: "/mashup/webclient/community/discussion/"
    };
    </pre>
        </li>
        <li>
            <div class="l1">
                '{a}' is already defined.
            </div>
            <pre>
    // 'title' is already defined.
    // BAD
    $.extend({
        confirm: function(info, call, title){
            var title = (title)? title : 'System';
            // ...
        }
    };
    // GOOD
    $.extend({
        confirm: function(info, call, title){
            title = title || 'System';
            // ...
        }
    };
    </pre>
        </li>
        <li>
            <div class="l1">
                Expected '{a}' and instead saw '{b}'.
            </div>
            <pre>
    // Expected '{' and instead saw 'return'.
    // BAD
    if ($(this).attr('class')) return;
    // GOOD
    if ($(this).attr('class')) {
        return;
    }
    </pre>
        </li>
        <li>
            <div class="l1">
                Extra comma.
            </div>
            <pre>
    // BAD
    var data = {
        name: "zhangsan",
        sex: "man",
    };
    // GOOD
    var data = {
        name: "zhangsan",
        sex: "man"
    };
    </pre>
        </li>
        <li>
            <div class="l1">
                Unnecessary semicolon.
            </div>
            <pre>
    // BAD
    function validate() {
    };
    // GOOD
    function validate() {
    }
    </pre>
        </li>
        <li>
            <div class="l1">
                Missing radix parameter.
            </div>
            <pre>
    // BAD
    var val = parseInt("10,000".replace(/,/g, ""));
    // GOOD
    var val = parseInt("10,000".replace(/,/g, ""), 10);
    </pre>
        </li>
        <li>
            <div class="l1">
                '{a}' was used before it was defined.
            </div>
            <pre>
    // 'plus' was used before it was defined.
    // BAD
    function add(a, b) {
        return plus(a) + b;
        function plus(a) {
            return a + 1;
        }
    }
    // GOOD
    function add(a, b) {
        function plus(a) {
            return a + 1;
        }
        return plus(a) + b;
    }
    </pre>
        </li>
        <li>
            <div class="l3">
                Use '{a}' to compare with '{b}'.
            </div>
            <pre>
    // Use '===' to compare with '0'
    // BAD
    if (span.length === 0) {
        span = btn;
    }
    // GOOD
    if (!span.length) {
        span = btn;
    }
    </pre>
            <pre>
    // Use '!==' to compare with 'null'
    // BAD
    if (this.unionOptions != null) {
    }
    // GOOD
    if (this.unionOptions) {
    }
    </pre>
        </li>
        <li>
            <div class="l3">
                ['{a}'] is better written in dot notation.
            </div>
            <pre>
    // ['data'] is better written in dot notation.
    // BAD
    if (typeof (options['data']) === 'string') {
    }
    // GOOD
    if (typeof (options.data) === 'string') {
    }
    </pre>
        </li>
        <li>
            <div class="l3">
                Bad for in variable '{a}'.
            </div>
            <pre>
    // Bad for in variable 'prop'.
    // BAD
    for (prop in headers) {
    }
    // GOOD
    for (var prop in headers) {
    }
    </pre>
        </li>
        <li>
            <div class="l3">
                Bad line breaking before '{a}'.
            </div>
            <pre>
    // Bad line breaking before '+'.
    // BAD
    var frame = '&lt;div class="contentPane"&gt;' 
        + '&lt;div class="comments_show_hide panel_action"&gt;'
        + '&lt;/div&gt;&lt;/div&gt;';
    // GOOD
    var frame = '&lt;div class="contentPane"&gt;' +
        '&lt;div class="comments_show_hide panel_action"&gt;' +
        '&lt;/div&gt;&lt;/div&gt;';
    </pre>
        </li>
        <li>
            <div class="l3">
                ......
            </div>
        </li>
    </ul>
</body>
</html>
